let domEle = document.getElementById('redis_line')
let line1 = {}
let option = {}

/**
 *
 * @param arrX X的坐标 ['10:00', '10:10', '10:10', '10:30', '10:40', '10:50']
 */
function changeData(echarts,arrX,arr1,arr2){
    line1 = echarts.init(domEle, null, {
        width: 'auto',
        height: 400
    });

    let option = {
        backgroundColor: '#fff',
        tooltip: {
            show: true,
            trigger: "axis",
        },
        grid: {
            top: '10%',
            bottom: '6%',
            left: '6%',
            right: '6%',
            containLabel: true
        },
        xAxis: [{
            type: 'category',
            boundaryGap: false,
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                margin: 10,
                fontSize: 14,
                color: 'rgba(#999)'
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#939ab6',
                    opacity: .15
                }
            },
            data: arrX  // X
        },],
        yAxis: [{
            type: 'value',
            offset: 15,
            max: 100,
            min: 0,
            axisTick: {
                show: false
            },
            axisLine: {
                show: false
            },
            axisLabel: {
                margin: 10,
                fontSize: 14,
                color: '#999'

            },
            splitLine: {
                show: false
            }

        }],
        series: [{
            name: '客户端数',
            type: 'line',
            z: 3,
            showSymbol: false,
            smoothMonotone: 'x',
            lineStyle: {
                width: 3,
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: 'rgba(59,102,246)' // 0% 处的颜色
                    }, {
                        offset: 1, color: 'rgba(118,237,252)' // 100% 处的颜色
                    }]
                },
                shadowBlur: 4,
                shadowColor: 'rgba(69,126,247,.2)',
                shadowOffsetY: 4
            },
            areaStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: 'rgba(227,233,250,.9)' // 0% 处的颜色
                    }, {
                        offset: 1, color: 'rgba(248,251,252,.3)' // 100% 处的颜色
                    }]
                }
            },
            smooth: true,
            data: arr1
        }, {
            name: 'key数',
            type: 'line',
            showSymbol: false,
            smoothMonotone: 'x',

            lineStyle: {
                width: 3,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(255,84,108)'
                }, {
                    offset: 1,
                    color: 'rgba(252,140,118)'
                }], false),
                shadowBlur: 4,
                shadowColor: 'rgba(253,121,128,.2)',
                shadowOffsetY: 4
            },
            areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(255,84,108,.15)'
                }, {
                    offset: 1,
                    color: 'rgba(252,140,118,0)'
                }], false),
            },
            smooth: true,
            data: arr2
        }
        ]
    }
    line1.setOption(option);
}

window.onresize = function () {
    line1.resize();
}
